<template>
<div>
  <i-card class="margin-bottom-10" dis-hover>
    <p slot="title">按条件搜索</p>
    <i-form @submit.native.prevent="search()">
      <filters @changed="filterChanged" :editionsVisible="false"></filters>
      <div class="filter-item">
        <span>名称</span>
        <div class="filter-item-input">
          <i-input placeholder="帖子名称" v-model="query.keyword">
            <i-button type="primary" html-type="submit" slot="append" icon="ios-search">搜索</i-button>
          </i-input>
        </div>
      </div>
    </i-form>
  </i-card>
  <div class="clearfix margin-bottom-10">
    <i-page :total="totalPosts" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
  </div>
  <i-table :columns="columns" :data="posts" class="margin-bottom-10"></i-table>
  <div class="clearfix">
    <i-page :total="totalPosts" :page-size="20" :current="query.page" size="small" @on-change="search" show-total class="pull-right" show-elevator></i-page>
  </div>
</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import Filters from '../components/filters'
import GradeSpan from '../components/data-span/Grade'
import SubjectSpan from '../components/data-span/Subject'
export default {
  components: {
    Filters,
    GradeSpan,
    SubjectSpan
  },
  data() {
    let that = this
    return {
      query: {
        subject: null,
        grade: null,
        keyword: null,
        page: 1
      },
      columns: [
        {
          title: '创建时间',
          key: 'createdAt',
          width: 100
        },
        {
          title: '帖子标题',
          key: 'title',
          render(h, params) {
            return h(
              'div',
              {
                attrs: {
                  class: 'item-title'
                }
              },
              [
                h(
                  'p',
                  {
                    class: params.row.top ? 'bold' : ''
                  },
                  [
                    h('span', '['),
                    h(GradeSpan, {
                      props: {
                        index: params.row.grade
                      }
                    }),
                    h(SubjectSpan, {
                      props: {
                        index: params.row.subject
                      }
                    }),
                    h('span', ']'),
                    h(
                      'router-link',
                      {
                        props: {
                          to: {
                            path: '/questions/' + params.row.id
                          }
                        },
                        attrs: {
                          target: '_blank'
                        }
                      },
                      this.row.title
                    )
                  ]
                ),
                h(
                  'div',
                  Array.apply(null, this.row.tags).map(function(tag) {
                    return h('i-tag', tag)
                  })
                )
              ]
            )
          }
        },
        {
          width: 180,
          renderHeader(h, params) {
            return h('div', [
              h('p', '作者'),
              h('p', '推荐数 / 回复数 / 浏览数')
            ])
          },
          render(h, params) {
            return h('div', [
              h(
                'p',
                params.row.createdBy.code + ' / ' + params.row.createdBy.name
              ),
              h(
                'p',
                {
                  attrs: {
                    title:
                      '共 ' +
                      params.row.recommended +
                      ' 次收藏 / ' +
                      params.row.replied +
                      ' 次推荐 / ' +
                      params.row.viewed +
                      ' 次浏览 '
                  }
                },
                params.row.recommended +
                  ' / ' +
                  params.row.replied +
                  ' / ' +
                  params.row.viewed
              )
            ])
          }
        },
        {
          title: '操作',
          width: 180,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.updatePostSticky({
                        id: params.row.id,
                        top: !params.row.top,
                        callback() {
                          that.$Notice.success({
                            title: '帖子管理',
                            desc: params.row.top ? '取消置顶成功' : '置顶成功'
                          })
                          that.search()
                        }
                      })
                    }
                  }
                },
                params.row.top ? '取消置顶' : '置顶'
              ),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$router.push({
                        path: '/admin/posts/' + params.row.id + '/replies'
                      })
                    }
                  }
                },
                '管理回复'
              ),
              h(
                'i-button',
                {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click() {
                      that.$Modal.confirm({
                        title: '确认',
                        content: '确认删除帖子【' + params.row.title + '】吗？',
                        okText: '确定',
                        cancelText: '取消',
                        loading: true,
                        onOk: () => {
                          that.removePost({
                            id: params.row.id,
                            callback() {
                              that.$Modal.remove()
                              that.$Notice.success({
                                title: '帖子管理',
                                desc: '删除帖子成功'
                              })
                              that.search()
                            }
                          })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      totalPosts: 'totalPosts',
      posts: 'posts'
    })
  },
  methods: {
    ...mapActions({
      searchPosts: 'searchPosts',
      updatePostSticky: 'updatePostSticky',
      removePost: 'removePost'
    }),
    filterChanged(filter) {
      this.query.grade = filter.grade
      this.query.subject = filter.subject

      this.search()
    },
    search(page) {
      this.query.page = page || 1
      this.searchPosts(this.query)
    }
  },
  activated() {
    this.search()
  }
}
</script>

<style>
</style>
